import React, { useState } from "react";
import { Modal, Input, Switch, Button } from "antd";
import { CopyOutlined } from "@ant-design/icons";

interface JsonDialogProps {
	visible: boolean;
	jsonOut: string;
	tidMode: boolean;
	beautify: boolean;
	onClose: () => void;
	onJsonModeChange: () => void;
}

const JsonDialog: React.FC<JsonDialogProps> = ({ visible, jsonOut, tidMode, beautify, onClose, onJsonModeChange }) => {
	const [copied, setCopied] = useState(false);

	const handleCopy = () => {
		navigator.clipboard.writeText(jsonOut);
		setCopied(true);
		setTimeout(() => setCopied(false), 2000);
	};

	return (
		<Modal
			title={
				<div style={{ display: "flex", alignItems: "center" }}>
					<span style={{ marginRight: 20 }}>JSON</span>
					<Switch
						checked={tidMode}
						onChange={onJsonModeChange}
						checkedChildren="tid模式"
						unCheckedChildren="默认"
						style={{ marginRight: 10 }}
					/>
					<Switch checked={beautify} onChange={onJsonModeChange} checkedChildren="美化" unCheckedChildren="压缩" />
				</div>
			}
			open={visible}
			onCancel={onClose}
			footer={[
				<Button key="copy" icon={<CopyOutlined />} onClick={handleCopy}>
					{copied ? "已复制" : "复制"}
				</Button>,
				<Button key="close" type="primary" onClick={onClose}>
					关闭
				</Button>,
			]}
		>
			<Input.TextArea value={jsonOut} autoSize={{ minRows: 10, maxRows: 20 }} readOnly />
		</Modal>
	);
};

export default JsonDialog;
